<template>
	<view>
		<scroll-view
			scroll-y
			:style="{
				height: windowHeight + 'px',
				boxSizing: 'border-box',
				borderBottom: borderStyle,
				backgroundColor: backgroundColor
			}"
			:refresherEnabled="refresherEnabled"
			:refresherTriggered="refresherTriggered"
			@scrolltolower="$emit('scrolltolower', $event)"
			@refresherrefresh="$emit('refresherrefresh', $event)"
		>
			<view class="scroll-page-content">
				<slot></slot>
			</view>
		</scroll-view>
	</view>
</template>
s

<script setup>
const scrollPageProps = defineProps({
	borderStyle: {
		type: [String, Boolean],
		default: false
	},
	refresherEnabled: {
		type: Boolean,
		default: false
	},
	refresherTriggered: {
		type: Boolean,
		default: false
	},
	backgroundColor: {
		type: String,
		default: '#fff'
	}
});

const emits = defineEmits(['scrolltolower', 'refresherrefresh']);

const { windowHeight } = uni.getSystemInfoSync();

const tolowrBottomScroll = () => {
	console.log('scrolltolower');
};
</script>

<style lang="scss">
.scroll-page-content {
	// height: 1000px;
	padding-bottom: env(safe-area-inset-bottom);
}
</style>
